<template>
  <!--我的界面-->
  <div class="mine">
    <div class="avatar">
      <div class="background">
        <img :src="this.avatar" alt="加载中">
      </div>
      <div class="useravatar">
        <div @click="changeAvatar">
          <img :src="this.avatar" alt="加载中">
        </div>
        <div class="user-name">
          <span v-html="list.sex =='0'?userSex='男':userSex='女'">{{ userSex }}</span>
          <span>{{ list.userName }}</span>
        </div>
      </div>
    </div>
    <div class="personal-information">
      <div class="phone-number">手机号:{{ this.list.phonenumber }}</div>
      <!--修改信息-->
      <div class="change-message" @click="changeMessage">修改信息</div>
      <div>
        <!--修改头像遮罩层-->
        <van-overlay :show="changeAvatarP" @click="changeAvatarP=false">
          <div class="wrapper" @click.stop>
            <div class="block"/>
            <!--修改头像-->
            <div>
              <van-uploader v-model="fileList" max-count="1" multiple/>
            </div>
            <button @click="touxiang">换头像</button>

          </div>
        </van-overlay>
      </div>
      <!--      修改信息的模态框-->
      <div class="change-message-overlay">
        <van-overlay :show="show">
          <div class="wrapper">
            <!--            遮罩层内修改信息-->
            <van-form @submit="onSubmit">

              <!--修改昵称-->
              <van-field
                  v-model="username"
                  :rules="[{ required: false }]"
                  label="昵称"
                  name="用户名"
                  placeholder="昵称"/>
              <!--修改性别-->
              <div class="sex">
                <van-radio-group v-model="radio" direction="horizontal">
                  <van-radio name="1">女</van-radio>
                  <van-radio name="0">男</van-radio>
                </van-radio-group>
              </div>
              <div style="margin: 16px;">
                <van-button native-type="submit" round type="info">
                  修改
                </van-button>

              </div>
            </van-form>
            <div class="out">
              <van-button round type="info" @click="show=false">
                取消
              </van-button>
            </div>
          </div>
        </van-overlay>
      </div>

      <!--  联系我们-->
      <div>
        <router-link class="talkUs" tag="div" to="/bussiness_cooperation" @click="talkMe">联系我们</router-link>

      </div>

      <!-- 退出按钮-->
      <div class="drop-out">
        <van-button block round type="default" @click="logOut">退出登录</van-button>
      </div>
      <!-- 返回登录-->
      <div v-show="backLog" class="back-login">
        <van-button block round type="default" @click="backLogin">返回登录</van-button>
      </div>

    </div>

  </div>
</template>

<script>
import {Dialog} from 'vant';
import {Notify} from 'vant';
import {logout, userInfo, changeInfo, changeAvatarImg} from '../api/api'

export default {
  name: "Main",
  data() {
    return {
      show: false,
      username: '',
      password: '',
      fileList: [],
      radio: '',
      //获取用户的信息
      list: [],
      userSex: '',
      avatar: '',
      talkUs: false,
      //  返回登录
      backLog: true,
      //  修改头像
      changeAvatarP: false
    }
  },
  //首先获取个人信息
  created() {
    userInfo().then(res => {
      if (res.code == 0) {
        this.backLog = false
        this.list = res.data;
        this.avatar = res.data.avatar;
      }
    })
  },
  methods: {
//改变头像弹出
    changeAvatar() {
      this.changeAvatarP = true;
    },
    touxiang() {
      //修改头像
      if (this.fileList.length != 0) {
        // 上传头像
        changeAvatarImg(this.fileList[0].file).then();
      }
      // 获取个人信息
      setTimeout(() => {
        userInfo().then(res => {
          this.avatar = res.data.avatar;
        })
      }, 600)

      //关闭模态框
      this.changeAvatarP = false;
    },
    //退出功能
    logOut() {
      Dialog.confirm({
        title: '',
        message: '确定退出吗？',
      })
          .then(() => {
            logout().then();
            setTimeout(() => {
              Notify({type: 'success', message: '退出成功'});
              this.$router.push({path: '/'})
            }, 600)
          })
          .catch(() => {
          });
    },

    //点击修改信息按钮、跳出遮罩层
    changeMessage() {
      this.show = !this.show;
    },

    // 更改信息的遮罩层
    onSubmit(values) {
      //传递昵称、性别
      console.log('submit', values);
      if (this.radio != '' || this.username != '') {
        //修改个人信息
        changeInfo(this.username, this.radio).then(res => {
          console.log(res);
          setTimeout(() => {
            // 获取个人信息
            userInfo().then(res => {
              this.list = res.data;
            })
          },)
        })
      }

      //关闭遮罩层
      this.show = !this.show;

    },
    //  联系我们
    talkMe() {
      this.talkUs = true;

    },
    //返回登录界面
    backLogin() {
      this.$router.push({path: '/login'})
    }
  }

}
</script>

<style lang="less" scoped>
.avatar {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  text-align: center;
  box-sizing: border-box;

  .background {
    position: relative;
    opacity: 0.7;
    height: 27vh;

    img {
      z-index: -1;
      width: 100%;
      height: 100%;

    }
  }

  .useravatar {
    position: absolute;
    top: 7%;
    left: 35%;


    img {
      z-index: 99;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      //border: 1px solid red;
      line-height: 80px;
      box-shadow: 0 0 5px red;
    }
  }

  .user-name {
    padding-top: 15px;
    box-sizing: border-box;

    span {
      padding: 0 15px;
      box-sizing: border-box;
      font-size: 19px;
      color: #fff;
      text-shadow: 0 0 5px rgba(0, 0, 0.5);
    }
  }
}

.personal-information {
  text-align: center;
  //margin-top: 100px;
  color: black;

  padding-top: 70px;
  box-sizing: border-box;
  background-color: #DFFCE6;
  height: calc(100vh - 27vh);

  .phone-number, .change-message {
    height: 50px;
    background-color: white;
    line-height: 50px;
    margin-bottom: 10px;
    border-radius: 999px;
  }

  //修改信息遮罩层
  .wrapper {
    text-align: center;
    margin-top: 150px;

    /deep/ .van-cell.van-field {
      border-radius: 10px 10px 10px 10px;
      margin-bottom: 10px;
    }

    /deep/ .van-radio-group--horizontal {
      width: 100%;
      justify-content: center;

      /deep/ .van-radio__label {
        color: cornsilk;
      }
    }

    /deep/ .van-button {
      width: 100%;
    }

    .out {
      margin: 16px;

    }
  }

}

.drop-out {
  height: 50px;
}

.talkUs {
  line-height: 50px;
  background-color: white;
  border-radius: 999px;
  height: 50px;
  box-sizing: border-box;
  margin: 10px 0;


}

/deep/ .van-dialog__content {
  img {
    width: 70%;
  }
}

.back-login {
  height: 50px;
}
</style>